import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Upload, Button, Input, message } from 'antd';
import CardCommon from '@/compontents/cardCommon';
import lhTool from 'lh-tool';
import api from '@/http/api';
import { PlusOutlined } from '@ant-design/icons';

export default (props: any) => {
  const { schoolId } = JSON.parse(sessionStorage.info).userInfo;
  const [fileList1, seFileList1]: any = useState([]);
  const [fileList2, seFileList2]: any = useState([]);
  const [id, setId] = useState(0);
  useEffect(() => {
    api.indexInfo({ uSchoolId: schoolId }).then(res => {
      if (res.data) {
        const arr1: any = [];
        const arr2: any = [];
        res.data.srcs.split('&').map((item: any, i: any) => {
          arr1.push({
            uid: i,
            url: item,
          });
        });
        res.data.src.split('&').map((item: any, i: any) => {
          arr2.push({
            uid: i,
            url: item,
          });
        });
        seFileList1(arr1);
        seFileList2(arr2);
        setId(res.data.id);
      }
    });
  }, []);

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );
  const onchange1 = (e: any) => {
    const fileLists = e.fileList;
    const len = fileLists.length;
    if (e.file.status === 'done') {
      const list: any = [...fileList1].splice(0, len - 1);
      list.push({
        uid: new Date().getTime(),
        url: e.file.response.data.src,
      });
      seFileList1(list);
    } else {
      seFileList1(fileLists);
    }
  };
  const onchange2 = (e: any) => {
    const fileLists = e.fileList;
    const len = fileLists.length;
    if (e.file.status === 'done') {
      const list: any = [...fileList2].splice(0, len - 1);
      list.push({
        uid: new Date().getTime(),
        url: e.file.response.data.src,
      });
      seFileList2(list);
    } else {
      seFileList2(fileLists);
    }
  };
  const submit = () => {
    if (fileList1.length && fileList2.length) {
      let srcs = '';
      fileList1.map((item: any) => {
        srcs += `${item.url}&`;
      });
      srcs = srcs.slice(0, -1);
      const url: any = fileList2[0].url;
      const _data = {
        srcs: srcs,
        src: url,
        id,
      };
      api.manageIndex({ ..._data }).then(res => {
        message.success('提交成功！');
      });
    } else {
      if (!fileList1.length) {
        message.error('轮播图至少为一张');
      }
      if (!fileList2.length) {
        message.error('banner位至少为一张');
      }
    }
  };
  return (
    <CardCommon>
      <div className={styles.wrap}>
        <div className={styles.imgs}>
          <span className={styles.intro}>轮播图：</span>
          <Upload
            action={process.env.apiUrl + 'upload/image'}
            listType="picture-card"
            fileList={fileList1}
            // onPreview={this.handlePreview}
            onChange={onchange1}
          >
            {fileList1.length >= 6 ? null : uploadButton}
          </Upload>
        </div>
        <div className={styles.imgs}>
          <span className={styles.intro}>banner位：</span>
          <Upload
            action={process.env.apiUrl + 'upload/image'}
            listType="picture-card"
            fileList={fileList2}
            // onPreview={this.handlePreview}
            onChange={onchange2}
          >
            {fileList2.length >= 1 ? null : uploadButton}
          </Upload>
        </div>
        <Button className={styles.submit} type="primary" onClick={submit}>
          提交
        </Button>
      </div>
    </CardCommon>
  );
};
